<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ollama 服务管理面板</title>
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.3/css/foundation.min.css">-->
    <link rel="stylesheet" href="../static/foundation.min.css">
    <link rel="stylesheet" href="../static/common.css">
    <link rel="stylesheet" href="index.css">

    <!-- foundation.min.js 依赖jquery.min.js -->
    <!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>-->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.3/js/foundation.min.js"></script>-->
    <!-- <script src="https://unpkg.com/i18next@21.6.13/dist/umd/i18next.min.js"></script>-->
    <!-- <script src="https://cdn.jsdelivr.net/npm/i18next-http-backend@1.3.1/i18nextHttpBackend.min.js"></script>-->
    <script src="../static/ajax.js" defer></script>
    <script src="../static/jquery-3.6.0.min.js" defer></script>
    <script src="../static/foundation.min.js" defer></script>
    <script src="../static/i18next.min.js" defer></script>
    <script src="../static/i18nextHttpBackend.min.js" defer></script>
    <script src="../i18n/i18n.js" defer></script>
    <script src="index.js" defer></script>
</head>

<body>
<div class="grid-container flex-container">
    <div class="grid-x grid-padding-x">
        <div class="large-12 cell">
            <h4 data-i18n="index.title">Ollama 服务管理面板</h4>
            <div class="callout">
                <h5 data-i18n="index.addedServices">已添加的服务</h5>
                <p data-i18n="index.description">以下是当前已添加的 Ollama 服务，您可以在此管理和查看服务状态。</p>

                <!-- 语言切换器 -->
                <div class="grid-x grid-padding-x">
                    <div class="cell small-3">
                        <label for="languageSwitcher" class="text-right middle" data-i18n="index.serverAddress">服务端地址:</label>
                    </div>
                    <div class="cell small-6">
                        <input id="serverAddress" class="form-control" type="text" placeholder="http://127.0.0.1:11434" value=""/>
                    </div>
                    <div class="cell small-3">
                        <button id="updateServerAddress" class="button" onclick="configServerAddress()" data-i18n="index.updateServerAddress">更新服务端地址</button>
                    </div>
                </div>

                <!-- 语言切换器 -->
                <div class="grid-x grid-padding-x">
                    <div class="cell small-3">
                        <label for="languageSwitcher" class="text-right middle" data-i18n="index.language">语言:</label>
                    </div>
                    <div class="cell small-6">
                        <select id="languageSwitcher" class="form-control">
                            <option value="zh">中文</option>
                            <option value="en">English</option>
                        </select>
                    </div>
                </div>

                <!-- 设置自动刷新间隔 -->
                <div class="grid-x grid-padding-x" style="margin-top: 10px;">
                    <div class="cell small-3">
                        <label class="text-right middle" data-i18n="index.refreshInterval">设置自动刷新间隔:</label>
                    </div>
                    <div class="cell small-6">
                        <select id="refreshInterval" class="button" style="width: auto;" data-i18n-attr="title:index.refreshInterval">
                            <option value="1000" data-i18n="index.interval1">1秒</option>
                            <option value="3000" data-i18n="index.interval3">3秒</option>
                            <option value="5000" data-i18n="index.interval5">5秒</option>
                            <option value="10000" selected data-i18n="index.interval10">10秒</option>
                        </select>
                    </div>
                </div>

                <!-- 测试语言模型按钮 -->
                <div class="grid-x grid-padding-x" style="margin-top: 10px;">
                    <div class="cell small-3"></div>
                    <div class="cell small-6">
                        <a href="/frontend/model/model.html" target="_blank" class="button jump-button" data-i18n="index.manageModel">管理模型</a>
                        <a href="/frontend/chat/chat.html" target="_blank" class="button jump-button" data-i18n="index.testModel">测试语言模型</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="grid-x grid-padding-x">
        <div class="large-12 cell">
            <table class="hover">
                <thead>
                <tr>
                    <th data-i18n="index.modelName">模型名称</th>
                    <th data-i18n="index.modelSize">模型文件大小</th>
                    <th data-i18n="index.modelParameterSize">模型参数大小</th>
                    <th data-i18n="index.modelQuantizationLevel">模型量化级别</th>
                    <th data-i18n="index.status">状态</th>
                    <!-- <th data-i18n="index.processor">处理器</th>-->
                    <th data-i18n="index.action">操作</th>
                </tr>
                </thead>
                <tbody id="tableBody"><!-- 服务列表信息 --></tbody>
            </table>
        </div>
    </div>

</div>

</body>
</html>
